<!--
*@repaymentConfirmation 还款确认
*@author lijiaqi
*@date 2023/10/17 12:39
-->
<template>
  <div class="pageBox">
    <!--    头部-->
    <x-header :left-options="{backText: ''}">还款</x-header>
    <!--    内容部分-->
    <div class="content_box">
      <!--   模块   -->
      <div class="item_box">
        <!--小模块-->
        <div class="item_box_one" v-for="(item,index) in dataList" :key="index">
          <div class="one_box" v-for="(i,index) in item.conList" :key="index">
            <div class="itemLine_box">
              <p>{{ i.name }}</p>
              <p>{{ i.value }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="item_box">
        <!--小模块2-->
        <div class="one_box">
          <p>提前还款金额（元）</p>
          <x-input title="¥" placeholder="请输入还款金额" v-model="count"></x-input>
        </div>
      </div>
      <!--    按钮    -->
      <div class="button_box">
        <div class="but_item" @click="toPay()">
          <p>确定</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "repaymentConfirmation",
  props: {},
  components: {},
  data() {
    return {
      dataList: [],
      count: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.dataList = [
      {
        title: '1',
        conList: [
          {
            name: '贷款名称',
            value: '个商e贷'
          }, {
            name: '贷款本金',
            value: '200,000.00元'
          }, {
            name: '结欠本金',
            value: '0.00元'
          }, {
            name: '结欠利息',
            value: '1,000.00元'
          }, {
            name: '总结欠金额',
            value: '1,000.00元'
          }, {
            name: '贷款期限',
            value: '12个月'
          }, {
            name: '年利率',
            value: '5.86%'
          }
        ]
      },
      {
        title: '2',
        conList: [
          {
            name: '借据号',
            value: 'A00001'
          },
          {
            name: '合同所在机构',
            value: '赣昌农商银行昌东支行'
          },
          {
            name: '合同起始日',
            value: '2019-09-02'
          },
          {
            name: '合同到期日',
            value: '2020-09-02'
          }
        ]
      },
      {
        title: '3',
        conList: [
          {
            name: '当期待还本金',
            value: '10,000.00 元'
          },
          {
            name: '当期待还利息',
            value: '1,000.00 元'
          },
        ]
      }
    ]
  },
  mounted() {
  },
  methods: {
    //去支付
    toPay() {
      this.$router.push("/refinance/momofukuPays?count=" + this.count);
    }
  }
}
</script>

<style lang="less" scoped>
.pageBox {
  min-height: 100vh;
  //中间内容部分
  .content_box {
    width: 100%;
    margin-top: 16px;

    .item_box {
      margin-bottom: 10px;
      height: 100%;
      //width: 100%;
      padding: 0 10px;
      background-color: #FFFFFF;

      .item_box_one {
        border-bottom: 1px solid #E5E6EB;
      }

      .item_box_one:last-child {
        border-bottom: 0;
      }

      .one_box {
        padding: 12px 2px;

        .itemLine_box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          p:first-child {
            margin-right: 15px;
          }
        }
      }
    }

    //按钮部分
    .button_box {
      width: 100%;
      margin: 20px 0;

      .but_item {
        margin: 0 10px;
        padding: 10px 0px;
        //width: 90%;
        //margin: 0 auto;
        background-color: #ff4a32;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          color: white;
          font-size: 16px;
        }
      }
    }
  }

  /deep/ .weui-cell {
    margin: 0;
    padding: 10px 0;
  }

  /deep/ .weui-cells:last-child:after {
    border-bottom: 0;
  }

  /deep/ .weui-cell:before {
    border: 0;
  }

  /deep/ .weui-label {
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
